<template>
<div class="box">
  <div id="map" ref="mapElement" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup>
import {
  initMaps,
  loadAreaGeoJson,
  clearAllAreaGeoJson,
  loadTempAreaGeoJson,
  loadXZQHGeoJson
} from '@/views/earthquake/earthquakeServer/gis/index.js'
import { defineProps } from 'vue'
const props = defineProps({
  fileidInfo: Object
})
const type = props.fileidInfo.type
const mapElement = ref()

watch(
  () => props.fileidInfo.fileid,
  (newval) => {
    if(props.fileidInfo.type === 2){
      loadXZQH();
      return
    }
    if (newval) {
      var str = newval.split(',')//多个数据都用逗号隔开 11adsasd23，21312eaw2 河北省,山东省
      loadLayer(str);
      return
    }
    clearAllAreaGeoJson()
  }
)

const loadLayer = (arr) => {
  clearAllAreaGeoJson()
  for (const e of arr) {
    if (props.fileidInfo.type === 0) {
      console.log(123213);
      
      loadTempAreaGeoJson(e,props.fileidInfo.query) //上传文件临时表 定时触发和eqim行政区划也是走的临时表
       } else {
      loadAreaGeoJson(e,props.fileidInfo.query) //正式表
    }
  }
}

const loadXZQH = ()=>{
 
   var xzqh = props.fileidInfo.xzqh;
   for (const item of xzqh) {
     loadXZQHGeoJson(item.code,item.type)//常规 加载行政区划 省市 //name isProvince是否为省 否则为市
   }
 
}

const init = () => {
  if (props.fileidInfo.fileid) {
    var str = props.fileidInfo.fileid.split(',');
    loadLayer(str)
    return
  }
}
const initGisMap = () => {
  initMaps(mapElement.value)
}

onMounted(() => {
  initGisMap()
  init()
})
</script>
<style lang="scss" scoped>
.box{
  border: 1px solid #000;
  padding: 15px;
  box-sizing: border-box;
}
</style>
